<template>
  <div class="imageLoader-container">
    <img v-if="!overAll" class="placeholder" :src="placeholder" />
    <img
      @load="loaded"
      :src="src"
      :style="{ opacity: opacityLoded, transition: `${duration}ms` }"
    />
  </div>
</template>

<script>
import "../../styles/global.less";
export default {
  props: {
    src: {
      type: String,
      required: true,
    },
    placeholder: {
      type: String,
      required: true,
    },
    duration: {
      type: Number,
      default: 500,
    },
  },
  data() {
    return {
      isLoaded: false, // 原始图片opacity的状态
      overAll: false, //所有加载完毕
    };
  },
  computed: {
    opacityLoded() {
      return this.isLoaded ? 1 : 0;
    },
  },
  methods: {
    loaded() {
      this.isLoaded = true;
      setTimeout(() => {
        this.overAll = true;
        this.$emit("load");
      }, this.duration);
    },
  },
};
</script>
<style lang="less" scoped>
@import "~@/styles/var.less";
@import "~@/styles/mixin.less";
.imageLoader-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  img {
    .self-fill();
    object-fit: cover;
    &:nth-child(2) {
      opacity: 0;
    }
  }
  .placeholder {
    filter: blur(2vw); // 设置模糊
  }
}
</style>